
<template>
  <div>
    <div class="status-bar" style="background-color:#fafafa;" :style="{'height': statusHeight}"></div>
  <wxc-tab-page ref="wxc-tab-page"
                :tab-titles="tabTitles"
                :tab-styles="tabStyles"
                title-type="text"
                :needSlider="needSlider"
                :is-tab-view="isTabView"
                :tab-page-height="tabPageHeight"
                :spm-c="4307989"
                style="overflow: hidden;"
                @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
    <div key="1"
          class="item-container"
          :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
          <div class="border-cell"></div>
          <wxc-pan-item>
            <news :height="tabPageHeight - tabStyles.height"></news>
          </wxc-pan-item>
    </div>
    <div key="2"
          class="item-container"
          :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
          <div class="border-cell"></div>
          <wxc-pan-item>
            <baike :height="tabPageHeight - tabStyles.height"></baike>
          </wxc-pan-item>
    </div>
    <div key="3"
          class="item-container"
          :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
          <div class="border-cell"></div>
          <wxc-pan-item>
            <faq :height="tabPageHeight - tabStyles.height"></faq>
          </wxc-pan-item>
    </div>
  </wxc-tab-page>
  </div>
</template>

<style scoped>

  .item-container {
    width: 750px;
    background-color: #f2f3f4;
  }
  .border-cell {
    /* background-color: #f2f3f4;
    width: 750px;
    height: 20px;
    align-items: center;
    justify-content: center; */
    /* border-bottom-width: 1px;
    border-style: solid;
    border-color: #e0e0e0; */
  }
  .cell {
    background-color: #ffffff;
  }
</style>
<script>
  const dom = weex.requireModule('dom');
  import { WxcTabPage, WxcPanItem, Utils } from 'weex-ui';
  import Config from './config';
  import news from '../news';
  import baike from '../baike';
  import faq from '../faq';
  export default {
    components: { WxcTabPage, WxcPanItem ,news,baike,faq},
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles,
      tabList: [],
      needSlider: true,
      demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      supportSlide: true,
      isTabView: true,
      tabPageHeight: 1334,
    }),
    created () {
      // this.$notice.alert({
      //   message:weex.config.env
      // })
      this.statusHeight = Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40);
      this.tabPageHeight = Utils.env.getPageHeight();

      if(weex.config.env.osName =='android' &&  /^8\.*/.test(weex.config.env.osVersion)){
          this.tabPageHeight = this.tabPageHeight + 88;
      }

      this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
      Vue.set(this.tabList, 0, this.demoList);
    },
    methods: {
      wxcTabPageCurrentTabSelected (e) {
        const self = this;
        const index = e.page;
        /* 未加载tab模拟数据请求 */
        if (!Utils.isNonEmptyArray(self.tabList[index])) {
          setTimeout(() => {
            Vue.set(self.tabList, index, self.demoList);
          }, 100);
        }
      },
      wxcPanItemPan (e) {
        if (Utils.env.supportsEBForAndroid()) {
          this.$refs['wxc-tab-page'].bindExp(e.element);
        }
      }
    }
  };
</script>